<template>
	<view class="">
		<view class="" v-if="table_list.length>0">
			<!-- <view class="indicator" :style="{'top':`${navtop}px`}" v-if="is_indicator">
				<view
					:class="['indicator_dot',{'indicator_dota':current_list.includes(index) || (index == 0 && indicator_type == 1)}]"
					:style="[{'width':`${indicator_size}rpx`},{height:`${indicator_size}rpx`},{background: inactive_color},{'--active_color':active_color}]"
					v-for="(item,index) in hander_list" @click="clickDot(index)">
				</view>
			</view> -->
			<view class="table">
				<scroll-view scroll-x :scroll-y='scroll_y' scroll-anchoring class="table_scroll"
					:scroll-left='scroll_left' :style="[{'max-height':height ? `${height}rpx`:''}]" @scroll='scroll'
					@scrolltolower='scrolltolower'>
					<view class="table_cont">
						<!-- <view :class="['table_hander',{'table_hander_bor_r':border_r}]" :style="[{'background-color':stripe?borer_left_coloe:hander_bg},
							{'--borer_left_coloe':borer_left_coloe},
							{'--label_width':label_width_rpx},
							{'--label_height':hander_height_rpx}
							]"> -->
						<view :class="['table_hander',{'table_hander_bor_r':border_r}]" :style="[{'background-color':hander_bg},
							{'--borer_left_coloe':borer_left_coloe},
							{'--label_width':label_width_rpx},
							{'--label_height':hander_height_rpx}
							]">
							<view class="" v-for="(item,index) in hander_list" :key="index">
								<text :style="[table_hander_style]">{{item[hander_key_name]}}</text>
							</view>
						</view>
						<view class="">
							<view :class="['table_list',
								{'table_list_br':index != table_list.length-1},
								{'table_list_bor_r':border_r},
								{'table_list_bgco':stripe && index%2 !=0},
								{'table_list_bgco_none':stripe && index%2 ==0}
								]" :style="[{'--borer_left_coloe':borer_left_coloe},
								{'--label_width':label_width_rpx},
								{'--label_height':label_height_rpx}]" v-for="(item, index) in table_list" :key="index">
								<slot name="row" :row='item' :index='index' />
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="empty" v-else>
			<view class="empty_title">暂时没有相关内容</view>
		</view>
	</view>
</template>

<script>
	/*
	 * zhTable表格，支持左侧顶部固定滑动，支持自定义表格内容，表格大小可定义设置，支持显示斑马纹，指示器多种样式可选；表格自定义设置、使用灵活，体积小
	 * （注意：表格内可实现上拉加载数据，但是会存在表格斜向滑动的不好体验；推荐使用页面的上拉加载方法onReachBottom）
	 * @property {Boolean} is_nav 是否自定义导航栏，默认false
	 * @property {Number} height 表格的高度(单位rpx)，注意：顶部表头固定请设置表格高度
	 * @property {Boolean} scroll_y 是否允许纵向滚动；默认false；注意：设置表格高度后请允许纵向滚动，否则内容过多时无法滚动
	 * @property {Array} hander_list 表头数组
	 * @property {String} hander_key_name 从hander_list元素对象中读取的键名，默认name
	 * @property {Object} table_hander_style 表头文字样式，默认{fontWeight: '400',fontSize: '24rpx',color: '#808080',}
	 * @property {String} hander_bg 表头的背景颜色，默认'#fff'
	 * @property {Number} hander_height 表头高度(单位rpx)，默认88
	 * 
	 * @property {Array} table_list 表格数据列表
	 * @property {Number} label_width 每个表格的宽度(单位rpx)，表头也是这个宽度，默认200
	 * @property {Number} label_height 每个表格的高度(单位rpx)，默认120
	 * @property {String} borer_left_coloe 表格左侧固定列的背景颜色，默认'#FAFAFA'
	 * 
	 * @property {Boolean} border_r 是否显示表格竖条边框，默认true
	 * @property {Boolean} stripe 是否显示斑马纹，默认false；注意：为了保持美观一致，斑马纹的颜色和borer_left_coloe颜色保持一直
	 * 
	 * @property {Boolean} is_indicator 是否显示指示器，默认true
	 * @property {Number} indicator_type 指示器样式类型 默认2 可选1
	 * @property {Number} indicator_size 指示器的大小(单位rpx)，默认12
	 * @property {String} inactive_color 指示器未激活颜色，默认'#E7EAF2'
	 * @property {String} active_color 指示器激活颜色，默认'#3C6DF8'
	 * 
	 */

	export default {
		props: {
			is_nav: { //是否自定义导航栏
				typeof: Boolean,
				default: () => false
			},
			height: { //表格的高度(单位rpx)
				typeof: Number,
				default: () => '',
			},
			scroll_y: { //是否允许纵向滚动
				typeof: Boolean,
				default: () => false,
			},
			hander_list: { //表头数组
				typeof: Array,
				default: () => [],
			},
			hander_key_name: { //从hander_list元素对象中读取的键名
				typeof: String,
				default: () => 'name'
			},
			table_hander_style: { //表头文字样式
				typeof: Object,
				default: () => ({
					fontWeight: '400',
					fontSize: '28rpx',
					color: '#fff',
				})
			},
			hander_bg: { //表头的背景颜色
				typeof: String,
				default: () => '#138bec'
			},
			hander_height: { //表头高度(单位rpx)
				typeof: Number,
				default: () => 88
			},
			table_list: { //表格数据列表
				typeof: Array,
				default: () => []
			},
			label_width: { //每列表格的宽度(单位rpx)
				typeof: Number,
				default: () => 160
			},
			label_height: { //每列表格的高度(单位rpx)
				typeof: Number,
				default: () => 120
			},
			borer_left_coloe: { //表格左侧边框颜色
				typeof: String,
				default: () => '#e1e1e1'
			},
			border_r: { //竖条边框
				typeof: Boolean,
				default: () => true
			},
			stripe: { //是否显示斑马纹
				typeof: Boolean,
				default: () => false
			},
			is_indicator: { //是否显示指示器
				typeof: Boolean,
				default: () => true
			},
			indicator_type: { //指示器样式类型 默认2 可选1
				typeof: Number,
				default: () => 1
			},
			indicator_size: { //指示器的大小(单位rpx)
				typeof: Number,
				default: () => 12
			},
			inactive_color: { //指示器未激活颜色
				typeof: String,
				default: () => '#E7EAF2'
			},
			active_color: { //指示器激活颜色
				typeof: String,
				default: () => '#3C6DF8'
			},
		},
		data() {
			return {
				current_list: [], //点亮的..列表
				box_w: 0, //盒子宽度
				navtop: 0, //顶部距离
				scroll_left: 0, //横向滚动条位置
			}
		},
		async mounted() {
			this.navtop = await this.getH()
		},
		methods: {
			scroll(e) { //滚动事件
				if (this.indicator_type == 1) {
					let active = Math.ceil((this.box_w - uni.upx2px(this.label_width) + e.detail.scrollLeft) / uni.upx2px(
						this
						.label_width))
					let arr = []
					if (active < this.hander_list.length) {
						for (let i = active; i > active - this.current_list.length; i--) {
							arr.push(i)
						}
					}
					this.current_list = arr
				} else if (this.indicator_type == 2) {
					let active = parseInt((this.box_w + e.detail.scrollLeft - 10) / uni.upx2px(this.label_width))
					this.current_list = [active]
				}
			},
			//获取盒子宽度
			getBoxHeight() {
				let arr = []
				const selector = uni.createSelectorQuery().in(this)
				selector.select('.table_scroll')
					.boundingClientRect(res => {
						if (!res) {
							clearTimeout(this.settime)
							this.settime = setTimeout(() => {
								this.getBoxHeight();
							}, 10);
							return;
						}
						this.box_w = res.width
						let current = Math.ceil(res.width / uni.upx2px(this.label_width))
						for (let i = 1; i < current; i++) {
							arr.push(i)
						}
						if (this.indicator_type == 1) {
							this.current_list = arr
						} else if (this.indicator_type == 2) {
							let active = parseInt(this.box_w / uni.upx2px(this.label_width))
							this.current_list = [active]                                         
						}
					}).exec();
			},
			getH() {
				//获取状态栏高度
				return new Promise((resolve, reject) => {
					uni.getSystemInfo({
						success: (e) => {
							let statusBar = 0; //状态栏高度
							let customBar = 0; // 状态栏高度 + 导航栏高度
							let navbar = 0; // 自定义标题与胶囊对齐高度

							// #ifdef MP
							statusBar = e.statusBarHeight;
							customBar = e.statusBarHeight + 46;
							if (e.platform === 'android') {
								customBar = e.statusBarHeight + 50;
							}
							// #endif

							// #ifdef MP-WEIXIN
							statusBar = e.statusBarHeight;
							const custom = wx.getMenuButtonBoundingClientRect();
							customBar = this.is_nav ? custom.bottom + custom.top - e.statusBarHeight +
								4 : 0;
							navbar = (custom.top - e.statusBarHeight) * 2 + custom.height;
							// #endif

							// #ifdef MP-ALIPAY
							statusBar = e.statusBarHeight;
							customBar = e.statusBarHeight + e.titleBarHeight;
							// #endif

							// #ifdef APP-PLUS
							statusBar = e.statusBarHeight;
							customBar = this.is_nav ? e.statusBarHeight : 0;
							// #endif

							// #ifdef H5
							statusBar = 0;
							customBar = e.windowTop;
							// #endif
							resolve(customBar);
						},
						fail: (err) => {
							reject(err);
						}
					});
				});
			},
			clickDot(index) {
				//点击指示器事件
				if (this.indicator_type == 2) {
					let current = Math.ceil(this.box_w / uni.upx2px(this.label_width))
					let num = index + 1 - current
					let distance = uni.upx2px(this.label_width) * num
					this.scroll_left = distance
				} else if (this.indicator_type == 1) {
					// 待定 没做好
					let max_num = Math.max(...this.current_list)
					if (index > max_num) {
						let current = Math.ceil(this.box_w / uni.upx2px(this.label_width))
						let num = index + 1 - current
						let distance = uni.upx2px(this.label_width) * num
						this.scroll_left = distance
					}

					let min_num = Math.min(...this.current_list)
					if (index < min_num) {
						let num = index - 1
						let distance = uni.upx2px(this.label_width) * num
						this.scroll_left = distance
					}
				}
			},
			scrolltolower(e) {
				//滚动到底部/右边，会触发 scrolltolower 事件
				if (e.detail.direction == 'right') {
					this.$emit('scrollRight')
				} else if (e.detail.direction == 'bottom') {
					this.$emit('scrollBottom')
				}
			},
		},
		computed: {
			hander_height_rpx() {
				return `${uni.upx2px(this.hander_height)}px`
			},
			label_width_rpx() {
				return `${uni.upx2px(this.label_width)}px`
			},
			label_height_rpx() {
				return `${uni.upx2px(this.label_height)}px`
			}
		},
		watch: {
			table_list: {
				handler(news, old) {
					this.$nextTick(() => {
						this.getBoxHeight()
					})
				},
				deep: true,
				immediate: true,
			},
		},
	}
</script>

<style lang="scss" scoped>
	/deep/ ::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	.indicator {
		position: sticky;
		z-index: 99;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;

		.indicator_dot {
			margin-left: 22rpx;
			border-radius: 50%;
		}

		.indicator_dota {
			background-color: var(--active_color) !important;
		}
	}

	.table {
		border-radius: 10rpx;
		background-color: #fff;
		// border: 2rpx solid #EBEEF5;

		.table_scroll {
			white-space: nowrap;
			min-height: 100rpx;

			.table_cont {
				display: inline-block;

				.table_hander {
					position: sticky;
					left: -2rpx;
					top: 0;
					z-index: 10;
					background-color: #fff;
					display: flex;
					align-items: center;
				}

				/deep/.table_hander>view {
					min-width: var(--label_width);
					height: var(--label_height);
					box-sizing: border-box;
					padding: 0 10rpx;
					// border-bottom: 2rpx solid #EBEEF5;
					display: flex;
					align-items: center;
					justify-content: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				/deep/.table_hander_bor_r>view {
					// border-right: 2rpx solid #EBEEF5;
					// border-bottom: 2rpx solid #EBEEF5;
				}

				/deep/.table_hander>view:first-child {
					position: sticky;
					left: -2rpx;
					top: -2rpx;
					z-index: 9;
					// background-color: var(--borer_left_coloe);
					background-color: #138bec;
				}

				/deep/.table_hander>view:last-child {
					// border-right: none !important;
					position: sticky;
					right: -2rpx;
					/* 使用 right 而不是 left，确保它固定在右边 */
					top: -2rpx;
					/* 如果需要在垂直方向固定 */
					z-index: 9;
					// background-color: var(--borer_left_coloe);
					background-color: #138bec;
					/* 使用相同的背景颜色 */
					border-right: none !important;
					/* 保证没有右边框 */
				}

				.table_list {
					display: flex;
					font-weight: 400;
					font-size: 28rpx;
					color: #333;
				}

				.table_list_bgco {
					background-color: var(--borer_left_coloe);
				}

				/deep/ .table_list>view {
					flex-shrink: 0;
					width: var(--label_width);
					height: var(--label_height);
					box-sizing: border-box;
					padding: 0 10rpx;
					white-space: normal;
					overflow-wrap: break-word;
					/* 新标准，推荐使用 */
					word-wrap: break-word;
					// display: flex;
					// flex-wrap: wrap;

				}

				/deep/ .table_list_bor_r>view {
					// border-right: 2rpx solid #EBEEF5;
					border-bottom: 2rpx solid #EBEEF5;
					
				}


				.table_list_br {
					// border-bottom: 2rpx solid #EBEEF5;
				}

				/deep/.table_list>view:first-child {
					position: sticky;
					left: -2rpx;
					top: -2rpx;
					z-index: 8;
					// background-color: var(--borer_left_coloe);
					background-color: #fff;
					padding-left: 10px;
				}

				/deep/.table_list_bgco_none>view:first-child {
					background-color: #fff !important;
				}

				/deep/.table_list>view:last-child {
					// border-right: none !important;
					position: sticky;
					right: -2rpx;
					/* 将右边的偏移量设置为 -2rpx */
					top: -2rpx;
					/* 如果需要垂直固定，调整 top */
					z-index: 8;
					// background-color: var(--borer_left_coloe);
					background-color: #fff !important;
					/* 与第一个元素的背景色保持一致 */
					border-right: none !important;
					/* 可选：移除右边框 */
				}

				// #ifdef MP-WEIXIN
				//小程序
				/deep/ .table_list>scoped-slots-row {
					display: flex;
				}

				/deep/ .table_list>scoped-slots-row>view {
					flex-shrink: 0;
					width: var(--label_width);
					min-height: var(--label_height);
					box-sizing: border-box;
					padding: 6rpx 10rpx;
					overflow: hidden;
					white-space: pre-wrap;
					color: #333;
					font-weight: 400;
					font-size: 28rpx;
				}

				/deep/ .table_list_bor_r>scoped-slots-row>view {
					// border-right: 2rpx solid #EBEEF5;
					border-bottom: 2rpx solid #EBEEF5;
				}

				/deep/.table_list>scoped-slots-row>view:first-child {
					position: sticky;
					left: -2rpx;
					top: -2rpx;
					z-index: 8;
					background-color: var(--borer_left_coloe);
				}

				/deep/.table_list_bgco_none>scoped-slots-row>view:first-child {
					background-color: #fff !important;
				}

				/deep/.table_list>scoped-slots-row>view:last-child {
					border-right: none !important;
				}

				// #endif
			}
		}
	}

	.empty {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx;

		.empty_title {
			font-size: 28rpx;
			color: #b0b0b0;
			text-align: center;
		}
	}
</style>